import React, {useRef, useState, useEffect} from 'react';
import {connect} from 'umi';
import {cloneDeep} from 'lodash';
import request from '@/utils/request'
import {ActionType, PageContainer, ProTable} from '@ant-design/pro-components';
import {Button, Modal, message, Form, Input } from 'antd';
import {PlusOutlined} from '@ant-design/icons';


const {TextArea} = Input;
const TableList: React.FC<unknown> = (props: any) => {
    // console.log('urlA', urlA)
    const {dispatch} = props;
    const [form] = Form.useForm();
    const actionRef = useRef<ActionType>();
    const [formModalOpen, setFormOpen] = useState(false);
    useEffect(() => {
        dispatch({
            type: 'files/init'
        })
    }, [dispatch]);
    const hideFileModal = () => {
        setFormOpen(false);
        form.resetFields();
    }
    const submitFileForm = (values: any) => {
        console.log('submitFileForm', values);
        // // if (form.v)
        request(
            values.id ? '/api1/baseFunction/updateStation' : '/api1/baseFunction/insertStation',
            {
                method: 'POST',
                // requestType: 'form',
                data: {
                    ...values
                },
            }
        ).then((response) => {
            if (response && response.code === 200) {
                message.success(values.id ? '编辑成功' : '新增成功');
                if (actionRef.current) {
                    actionRef.current.reload();
                    setFormOpen(false);
                    form.resetFields();
                }
            } else {
                message.warning(response?.msg)
            }
        })
    }
    function editCar(obj){
        console.log('editCar', obj);
        setFormOpen(true);
        form.setFieldsValue({
            ...obj
        });
    };
    const columns: any = [
        {
            title: '场站名称',
            dataIndex: 'stationName',
            // search: false
        },
        {
            title: '用户名',
            dataIndex: 'userName',
            // tip: '名称是唯一的 key',
        },
        {
            title: '用户手机号',
            dataIndex: 'tel',
            // tip: '名称是唯一的 key',
        },
        {
            title: '操作',
            dataIndex: 'ope',
            search: false,
            render: (_, record) => {
                return <a onClick={() => editCar(record)} style={{color: '#316ad5'}}>编辑</a>
            }
        },
    ];
    return (
        <PageContainer
            header={{
                title: '',
            }}
        >
            <ProTable<API.UserInfo>
                headerTitle="场站列表"
                actionRef={actionRef}
                pagination={{defaultPageSize: 10}}
                rowKey="id"
                search={{
                    labelWidth: 120,
                }}
                toolBarRender={() => [,
                    <Button
                        type="primary"
                        icon={<PlusOutlined/>}
                        onClick={() => {
                            setFormOpen(true);
                            // form.setFieldValue('effectTime2', [null, null])
                        }}
                    >
                        新增场站
                    </Button>
                ]}
                request={async (params, sorter, filter) => {
                    // const { data, success } = await queryUserList({
                    //   ...params,
                    //   // FIXME: remove @ts-ignore
                    //   // @ts-ignore
                    //   sorter,
                    //   filter,
                    // });
                    // return {
                    //   data: data?.list || [],
                    //   success,
                    // };
                    const cloneParams = cloneDeep(params);
                    delete cloneParams.current;
                    const {data, code} = await request('/api1/baseFunction/stationPageList', {
                        method: 'post',
                        data: {
                            ...cloneParams,
                            pageNum: params.current
                        }
                    });
                    if (code && code === 200) {
                        return {
                            data: data?.records || [],
                            success: true,
                            total: data?.total
                        };
                    }
                }}
                columns={columns}
            />
            <Modal
                title="新增场站"
                open={formModalOpen}
                width={680}
                onOk={form.submit}
                onCancel={hideFileModal}
                maskClosable={false}
                okText="确认"
                cancelText="取消"
            >
                <Form
                    labelCol={{span: 4}}
                    wrapperCol={{span: 14}}
                    layout="horizontal"
                    form={form}
                    style={{maxWidth: 600}}
                    onFinish={(values) => submitFileForm(values)}
                >
                    <Form.Item
                        label="id"
                        name="id"
                        style={{display: 'none'}}
                    >
                        <Input />
                    </Form.Item>
                    <Form.Item
                        label="场站名称"
                        name="stationName"
                        rules={[{required: true, message: '请输入场站名称'}]}
                    >
                        <Input placeholder='请输入场站名称' />
                    </Form.Item>
                    <Form.Item
                        label="用户名"
                        name="userName"
                        rules={[{required: false, message: '请输入车牌号'}]}
                    >
                        <Input placeholder='请输入用户名' />
                    </Form.Item>
                    <Form.Item
                        label="电话"
                        name="tel"
                        rules={[
                            {required: false, message: '请输入车牌号'},
                            {pattern: /^((\+|00)86)?1\d{10}$/, message: '请输入正确的手机号', trigger: 'blur'}
                        ]}
                    >
                        <Input placeholder='请输入电话' />
                    </Form.Item>
                    <Form.Item
                        name="remark"
                        label="备注"
                        rules={[{required: false, message: ''}]}
                    >
                        <TextArea style={{width: '350px'}}/>
                    </Form.Item>
                </Form>
            </Modal>
        </PageContainer>
    );
};

export default connect(({files}) => {
    return {...files}
})(TableList);
